import React from "react";
import styles from "../css/train.module.css";
import { useNavigate, useSearchParams } from "react-router-dom";

function TicketItem(props) {
  let nav = useNavigate();
  let [sp] = useSearchParams();
  const goDetail = () => {
    nav(
      `/detail/${props.id}?start=${props.startStation}&end=${
        props.endStation
      }&date=${sp.get("date")}`
    );
  };
  return (
    <div className={styles.ticketbox} onClick={goDetail}>
      <div className={styles.card}>
        <span className={styles.sp1}>发车 {props.startTime}</span>
        <span className={styles.sp2}>{props.startStation}</span>
        <span className={styles.sp3}>{props.trainNo}</span>
        <span className={styles.sp4}>￥ {props.ssoftSeat.price}</span>
        <span className={styles.sp5}>到达 {props.endTime}</span>
        <span className={styles.sp6}>{props.endStation}</span>
        <span className={styles.sp7}>耗时 {props.timeTaken}</span>
        <span className={styles.sp8}>
          二等座：{props.ssoftSeat.ticketNum}
          {typeof props.ssoftSeat.ticketNum === "number" ? "张" : ""}
        </span>
      </div>
    </div>
  );
}

export default TicketItem;
